<template>
	<view class="container">
		<view class="box">
			<view class="register_txt">
				填写资料
			</view>
			<view class="desc">有助于你找到更合适的CP哦~</view>
			<u-form labelPosition="top" :model="ruleForm" labelWidth="80" ref="uForm" class="uForm"
				:labelStyle="labelStyle">
				<u-form-item :borderBottom="false">
					<view class="upload" >
						<image v-if="ruleForm.avatar == ''" src="/static/imgs/tou.png" mode="widthFix" class="avatar" style="width: 164rpx;" @tap="avatarOn()" >
						</image>
						<image v-else :src="ruleForm.avatar" class="avatar" mode="widthFix" style="width: 164rpx;" @tap="avatarOn()"></image>
						<span></span>
					</view>
				</u-form-item>

				<u-form-item label="昵称" prop="account" borderBottom>
					<u-input v-model="ruleForm.name" placeholder="我的昵称" border="none">
					</u-input>
				</u-form-item>

				<u-form-item label="性别" :borderBottom="false">
					<view class="dis-flex flex-x-start">
						<view class="boy" @click="ruleForm.sex=1" :class="{active:ruleForm.sex == 1}">
							<image :src="ruleForm.sex == 1 ? '/static/imgs/nan.png' :'/static/imgs/nan1.png'"
								mode="widthFix" class="sex" />
						</view>

						<view class="boy" @click="ruleForm.sex =2" :class="{active:ruleForm.sex == 2}">
							<image :src="ruleForm.sex == 2 ? '/static/imgs/nv.png' :'/static/imgs/nv1.png'"
								mode="widthFix" class="sex" />
						</view>
					</view>
				</u-form-item>

				<view class="ubtn">
					<u-button type="primary" text="完成" @click="onSubmit"></u-button>
				</view>
			</u-form>
		</view>
	</view>
</template>

<script>
	import {
		uploadImage
	} from "../../api/common.js";
	import {
		updateInfo
	} from "../../api/my.js";
	import st from "../../utlis/showtoast.js";

	export default {
		data() {
			return {
				ruleForm: {
					avatar: "",
					url: "",
					name: "",
					sex: 1
				},
				labelStyle: {
					color: '#252525',
					padding: '20rpx 0'
				}
			}
		},
		onLoad() {

		},
		created() {
			// 监听从裁剪页发布的事件，获得裁剪结果
			uni.$on('uAvatarCropper', path => {
				// 可以在此上传到服务端
				this.onAvatar(path)
			})
		},
		onReady() {},
		methods: {
			avatarOn() {
			
				this.$u.route({
					// 关于此路径，请见下方"注意事项"
					url: 'components/uview-ui/components/u-avatar-cropper/u-avatar-cropper',
					// 内部已设置以下默认参数值，可不传这些参数
					params: {
						// 输出图片宽度，高等于宽，单位px
						destWidth: 300,
						// 裁剪框宽度，高等于宽，单位px
						rectWidth: 200,
						// 输出的图片类型，如果'png'类型发现裁剪的图片太大，改成"jpg"即可
						fileType: 'jpg',
					}
				})
			},
			/**
			 * 头像
			 */
			async onAvatar(e) {
				let img = e;
				let res = await uploadImage(img)
				this.ruleForm.url = res.data.url
				this.ruleForm.avatar = img
			},
			/**
			 * 提交
			 */
			async onSubmit() {
				if (this.ruleForm.url == "") {
					st.show("请上传头像")
					return
				}
				if (this.ruleForm.name == "") {
					st.show("请填写昵称")
					return
				}
				let obj = {
					username: this.ruleForm.name,
					avatar: this.ruleForm.url,
					gender: this.ruleForm.sex
				}
				await updateInfo(obj).then(res => {

					console.log('res', res);
					st.success("填写完成")
					uni.switchTab({
						url: "/pages/index/index"
					})
				}).catch(rea => {
					console.log('rea', rea);
					st.show("上传失败")
				})
				

			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		width: 100vw;
		height: 100vh;
		background: #fff;

		.box {
			padding: 120rpx 100rpx 0;

			.register_txt {
				font-size: 42rpx;
				color: $uni-text-color;
				font-weight: bold;
			}

			.desc {
				margin-top: 22rpx;
				font-size: 26rpx;
				color: $uni-text-color-grey;
				line-height: 36rpx;
			}

			.uForm {
				margin-top: 76rpx;

				.ubtn {
					margin-top: 150rpx;

					/deep/ .u-button--primary {
						border-radius: 86rpx;
					}
				}

				.upload {
					position: relative;

					.avatar {
						width: 158rpx;
						height: 158rpx;
						overflow: hidden;
						border-radius: 50%;
					}

					span {
						display: inline-block;
						width: 42rpx;
						height: 42rpx;
						position: absolute;
						left: 116rpx;
						bottom: 0;
						background: url('~@/static/imgs/add.png') no-repeat center;
						background-size: cover;
					}
				}

				.boy {
					width: 140rpx;
					height: 80rpx;
					line-height: 80rpx;
					background: #fff;
					border-radius: 40rpx;
					margin-right: 30rpx;
					border: 1px solid #EEEEEE;
					text-align: center;

					&.active {
						background: #8DB3FE;
						border: 1px solid #8DB3FE;
					}

					.sex {
						width: 32rpx;
					}
				}
			}
		}
	}
</style>